<template>
  <div class="pay-page">
    <div class="pay-card">
      <h2 class="title">扫码支付订单</h2>
      <p class="subtitle">请使用 <strong>支付宝</strong> 扫码完成支付</p>
      <div class="qr-box" v-if="qrUrl">
        <img :src="qrUrl" :key="qrUrl" alt="支付宝扫码支付" class="qrcode"/>
      </div>
      <div class="loading" v-else>
        正在加载支付二维码...
      </div>

      <div class="tip">支付完成后可前往 <a @click="$router.push(`/order/${orderId}`)">订单详情</a> 查看状态</div>
    </div>
  </div>
</template>

<script>
import payApi from '@/api/pay'
import QRCode from 'qrcode'

export default {
  data() {
    return {
      qrUrl: '',
      orderId: ''
    }
  },

  async asyncData({params, error}) {
    try {
      const res = await payApi.pay(params.orderId)
      if (res.data.code !== 20000) {
        throw new Error(res.data.message)
      }
      const url = res.data.data
      const qrBase64 = await QRCode.toDataURL(url)
      return {
        orderId: params.orderId,
        qrUrl: qrBase64
      }
    } catch (err) {
      error({statusCode: 500, message: '获取支付二维码失败'})
    }
  }

}
</script>

<style scoped>
.pay-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
  background: #f5f7fa;
  padding: 40px 20px;
}

.pay-card {
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  text-align: center;
  width: 400px;
}

.title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #333;
}

.subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 30px;
}

.qr-box img {
  width: 200px;
  height: 200px;
  border: 1px solid #eee;
  padding: 6px;
  background: #fff;
  border-radius: 6px;
}

.loading {
  font-size: 16px;
  color: #999;
  padding: 60px 0;
}

.tip {
  margin-top: 30px;
  font-size: 13px;
  color: #888;
}

.tip a {
  color: #409EFF;
  text-decoration: underline;
  cursor: pointer;
}
</style>
